<template>
<div>
  <div id="container"></div>
  <div class="bg">
		<HeadBox title="工程建设"></HeadBox>
    <slot></slot>
  </div>
	<div id="maptools">
		<ul class="bar">
			<li @mouseover="handleOver()">
				<i class="icon icon-layer"> </i>
				<div class="menu-drop-wrap" ref="menuDropRef" @mouseout="handleOut()">
					<ul class="menu-list" v-if="mapDropdownList">
						<li v-for="item in mapDropdownList" :key="item.name">
							<el-checkbox v-model="item.isCheck" @change="changeCheckBox($event, item.typeId)" /><span>{{ item.name }}</span>
						</li>
					</ul>
				</div>
			</li>
			<li><i class="icon icon-point"></i></li>
			<li><i class="icon icon-plug" @click="handlePlug(1)"></i></li>
			<li><i class="icon icon-reduce" @click="handlePlug(2)"></i></li>
		</ul>
	</div>
	<info-window v-if="showDetail" :title="detail.name" @close="showDetail = false">
		<info-window-item label="企业类型：" :value="detail.trade | filterTrade"></info-window-item>
		<info-window-item label="地址：" :value="detail.address"></info-window-item>
		<info-window-item label="经济类型：" :value="detail.type"></info-window-item>
		<info-window-item label="法定代表人：" :value="detail.legalPerson"></info-window-item>
		<info-window-item label="详细信息：" :value="detail.business"></info-window-item>
	</info-window>
</div>
</template>

<script>
import AMap from "@/js/AMap.js"
import areaData from '@/assets/js/area.js'
import AMapLoader from "@amap/amap-jsapi-loader";
import InfoWindow from "@/components/info-window/index.vue";
import InfoWindowItem from "@/components/info-window/item.vue";
var that
export default {
  name: "MapContainer",
	components: {
		InfoWindow,
		InfoWindowItem
	},
  data() {
    return {
			showDetail: false,
			detail: {},
			mapDropdownList: [
        { isCheck: true, typeId: "'c'", name: '制造业' },
        { isCheck: true, typeId: "'d'", name: '电力、热力、燃气及水生产和供应业' },
        { isCheck: true, typeId: "'e'", name: '建筑业' },
        { isCheck: true, typeId: "'f'", name: '批发和零售业' },
        { isCheck: true, typeId: "'g'", name: '交通运输、仓储和邮政业' },
        { isCheck: true, typeId: "'j'", name: '金融业' },
        { isCheck: true, typeId: "'k'", name: '房地产业' },
        { isCheck: true, typeId: "'n'", name: '水利、环境和公共设施管理业' },
        { isCheck: true, typeId: "'q'", name: '卫生和社会工作' },
      ],
			type: ["'c'", "'d'", "'e'", "'f'", "'g'", "'j'", "'k'", "'n'", "'q'"],
			typeId: '',
      maskFlag: false,
				jiantouFlag: "icon-jiantouxia-copy",
				map: null,
				longitude: 120.432144, // initLng
				latitude: 36.147497, // initLat
				center: [120.432144, 36.147497],
				circle: null,
				marker: null,
				zoom: 13,
			
				scrollHeight: 300,
				noMore: false,
				page: 1,
				limit: 2,
				total: null,
				refreshType: 'custom',
				refreshTip: '正在下拉',
				loadTip: '获取更多数据',
				loadingTip: '正在加载中...',
				emptyTip: '--我是有底线的--',
				touchHeight: 50,
				height: 0,
				bottom: 50,
				autoPullUp: true, // 是否自动加载更多
				stopPullDown: true, // 如果为 false 则不使用下拉刷新，只进行上拉加载
				searchTabType: 'dating', // 搜索类型：大厅dating还是事项buss
				searchModalShow: false, // 是否显示检索列表
				buss_icon: '../../static/img/icon-buss.svg',
				dating_icon: '../../static/img/icon-dating-active.svg',
				buss_color: '#bfbfbf', // 事项
				dating_color: '#2979ff', // 大厅
				searchListArr: [],
				noSearchData: true,
				resAmap: null,
				markerList:[]
    };
  },
  created() {
    //DOM初始化完成进行地图初始化
    this.initMap();    
		that = this
  },
	filters: {
		filterTrade(val) {
      if(that.mapDropdownList.length > 0) {
        for (let i = 0; i < that.mapDropdownList.length; i++) {
          const item = that.mapDropdownList[i];
          if(`'${val.toLowerCase()}'` == item.typeId) {
            return item.name
          }
        }
      }
    }
	},
  methods: {
		// 鼠标移入
    handleOver() {
      this.$refs.menuDropRef.style.display = 'block'
    },
    // 鼠标移出
    handleOut() {
      this.$refs.menuDropRef.style.display = 'none'
    },
    // 鼠标放大缩小
    handlePlug(type) {
      if (type === 1) {
        this.map.zoomIn()
      } else {
        this.map.zoomOut()
      }
    },
    // 监听复选框
    changeCheckBox(val, typeId) {
			let type = this.type
			if(val) {
				type.push(typeId)
			}else {
				type.splice(type.indexOf(typeId), 1)
			}
			this.type = type
      this.getPoint(val, typeId)
    },
		getPoint(val, typeId) {
			this.$get('/engineeringconstruction/queryPoint', {
				trade: this.type.join(',')
			}).then(res => {
				// 创建一个 Marker 实例：
			  this.map.remove(this.markerList);
				this.markerList = res.data.data.map(item => {
					let marker = new this.resAmap.Marker({
						icon: require(`@/assets/image/project-icon/${item.trade}.png`),
            position: [item.lng, item.lat], 
            title: item.name
					});

          marker.on("click", () => {
            this.detail = item
            this.showDetail = true
          });
          return marker;
					// 将创建的点标记添加到已有的地图实例：
				})
				this.map.add(this.markerList);
			})
		},// 弹窗看详情
    markerClick(e) {
			// var e = event || window.event;
			var left = e.pixel.x;
			var top = e.pixel.y;
			this.detail = e.target._opts.extData
      this.showDetail = true
    },
    async initMap() {
      try {
					this.resAmap = await AMap()
					
					this.map = new this.resAmap.Map('container', {
						center: this.center, // 地图中心点
						resizeEnable: true,
						zoom: this.zoom,
						lang: 'ch',
						keyboardEnable: true,
						loaded: false,
					})
					this.getPoint()
				} catch (e) {
					console.error(e)
				}
    }
  },
};
</script>

<style lang="less" scoped>

#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100vh;
}
.bg {
  background: url(../../assets/image/bg.png);
  background-size: 100% 100%;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 997;
}
#maptools {
	z-index: 999;
  position: absolute;
  width: 236px;
  height: 37px;
  left: 30%;
  top: 114px;
  background: radial-gradient(520.22% 81.31% at 50% 50%, rgba(1, 46, 81, 0.23) 0, rgba(3, 96, 169, 0.23) 100%);
  border: 1px solid #153c62;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: inset 0 0 5px 5px #071c32;
  box-shadow: inset 0 0 5px 5px #071c32;
  .menu-drop-wrap {
    overflow-y: scroll;
    position: absolute;
    display: none;
    background: rgba(7, 45, 78, 0.5);
    border: 1px solid #153c62;
    padding: 5px 10px;
    height: 200px;
    top: 40px;
    ul.menu-list {
      li {
        padding: 3px 0;
        font-size: 14px;
        font-style: normal;
        color: #fff;
        text-align: left;
        width: 100%;
        cursor: pointer;
      }
      .el-checkbox {
        margin-right: 10px;
      }
    }
  }
  .bar {
    display: flex;
    align-items: center;
    padding-top: 6px;
    li {
      width: 25%;
    }
    .icon {
      position: relative;
      display: inline-block;
      cursor: pointer;
      width: 22px;
      height: 22px;
      background-size: contain;
    }
    .icon-layer {
      background: url('../../assets/image/icon/icon1.png') top no-repeat;
    }
    .icon-point {
      background: url('../../assets/image/icon/icon2.png') top no-repeat;
    }
    .icon-plug {
      background: url('../../assets/image/icon/icon3.png') top no-repeat;
    }
    .icon-reduce {
      background: url('../../assets/image/icon/icon4.png') top no-repeat;
    }
  }
}
</style>
<style>
.amap-icon{

  overflow:inherit !important;

}
</style>